<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '自选管理',
  },
}
</route>
<template>
  <PageLayout :navbarShow="true" navTitle="自选管理">
    <!--表头-->
    <wd-row
      style="
        text-align: center;
        padding: 20rpx 30rpx;
        color: #8a8a8a;
        border-bottom: 1px solid #f2f2f2;
        background-color: #fff;
        font-size: 24rpx;
      "
    >
      <wd-col :span="12" style="text-align: left">基本信息</wd-col>
      <wd-col :span="3">置顶</wd-col>
      <wd-col :span="5">移动排序</wd-col>
      <wd-col :span="4">操作</wd-col>
    </wd-row>
    <!--骨架屏-->
    <view v-if="showLoadingView">
      <wd-skeleton v-for="i in 6" :key="i" theme="paragraph" style="margin-bottom: 10rpx" />
    </view>

    <!--空数据提示-->
    <wd-status-tip
      image="../../static/content.png"
      tip="暂未添加自选基金"
      v-else-if="!showLoadingView && dataList.length == 0"
    />

    <!--滚动-->
    <scroll-view v-else scroll-y style="background-color: #fff">
      <wd-row
        v-for="(data, index) in dataList"
        :key="index"
        style="padding: 20rpx 20rpx; text-align: center; font-size: 24rpx"
      >
        <wd-col :span="12" style="text-align: left">
          <view>
            {{ data.name }}
          </view>
          <view style="display: flex">
            <view style="margin-right: 10rpx">
              <wd-tag color="#6f717a" bg-color="#f6f8fb">
                {{ data.group_name }}
              </wd-tag>
            </view>
            <view>
              <wd-tag color="#6f717a" bg-color="#f6f8fb">
                {{ data.code }}
              </wd-tag>
            </view>
          </view>
        </wd-col>
        <wd-col :span="3">
          <wd-icon name="backtop" @click="onClickToFirst(data, index)" />
        </wd-col>
        <wd-col :span="5">
          <wd-icon name="arrow-up" style="margin-right: 30rpx" @click="onClickUp(data, index)" />
          <wd-icon name="arrow-down" @click="onClickDown(data, index)" />
        </wd-col>
        <wd-col :span="4">
          <wd-switch v-model="data.checked" size="24rpx" />
        </wd-col>
      </wd-row>

      <!--间隔槽-->
      <wd-gap></wd-gap>
    </scroll-view>
    <!--底部工具条-->
    <view
      style="
        display: flex;
        justify-content: center;
        padding: 30rpx;
        background-color: #fff;
        font-size: 24rpx;
        border-radius: 10rpx 10rpx 0rpx 0rpx;
      "
    >
      <view style="flex: 1">
        <wd-picker
          title="点击确定即分组"
          :columns="groupList"
          v-model="groupName"
          @confirm="handleGroupConfirm"
          use-default-slot
        >
          <view
            style="
              width: 70%;
              margin: 0 auto;
              text-align: center;
              background-color: #f8f8f8;
              color: #0083ff;
              padding: 15rpx 0rpx;
              border-radius: 10rpx;
            "
          >
            选择分组
          </view>
        </wd-picker>
      </view>
      <view style="flex: 1">
        <view
          style="
            width: 70%;
            margin: 0 auto;
            text-align: center;
            background-color: #e6f2ff;
            color: #0083ff;
            padding: 15rpx 0rpx;
            border-radius: 10rpx;
          "
          @click="remove"
        >
          批量删除
        </view>
      </view>
    </view>
  </PageLayout>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { http } from '@/utils/http'
import { useMessage, useToast } from 'wot-design-uni'

defineOptions({
  name: 'addChoose',
  options: {
    styleIsolation: 'shared',
  },
})
const message = useMessage()
const toast = useToast()
// 显示加载中的段落
const showLoadingView = ref(true)
// 数据列表
const dataList = ref([])
// 分组列表
const groupList = ref([])
// 分组名称
const groupName = ref('')
// 原分组
const initGroup = ref([])
// 加载数据
const loadData = () => {
  // 设置
  showLoadingView.value = true
  // 参数
  const params = {
    pageNo: 1,
    pageSize: 1000,
  }
  http.get('/sys/fund/optional/list', params).then((res: any) => {
    if (res.success) {
      dataList.value = res.result.records
      showLoadingView.value = false
    }
  })
}

// 批量删除
const remove = () => {
  // 遍历给选择的数据赋值
  const paramList = []
  dataList.value.forEach((e) => {
    if (e.checked) {
      paramList.push({ id: e.id })
    }
  })
  if (paramList.length === 0) {
    toast.error('请选择数据')
    return false
  }
  message
    .confirm({
      msg: '是否批量删除选中的数据？',
      title: '提示',
    })
    .then(() => {
      // 发起请求
      http.post('/sys/fund/optional/batchDelete', paramList).then((res: any) => {
        if (res.success) {
          loadData()
        }
      })
    })
    .catch(() => {
      console.log('点击了取消按钮')
    })
}

// 排序改变
const changeDraggableItem = () => {
  const param = []
  for (let i = 0; i < dataList.value.length; i++) {
    const data = dataList.value[i]
    param.push({ id: data.id, orderBy: i })
  }
  // 发起请求，进行排序变更
  http.post('/sys/fund/optional/batchUpdate', param).then((res: any) => {
    if (res.success) {
      console.log('排序成功')
    }
  })
}

// 置顶
const onClickToFirst = (data, index) => {
  dataList.value.splice(index, 1)
  dataList.value.unshift(data)
  // 发起排序
  changeDraggableItem()
}

// 点击上移
const onClickUp = (data, index) => {
  if (index === 0) {
    toast.warning('第一项无法上移')
    return
  }
  const upData = dataList.value[index - 1]
  // 数据下移
  dataList.value.splice(index, 1, upData)

  // 数据上移
  dataList.value.splice(index - 1, 1, data)

  // 发起排序
  changeDraggableItem()
}

// 点击下移
const onClickDown = (data, index) => {
  if (dataList.value.length - 1 === index) {
    toast.warning('已是最后一项，无法下移')
    return false
  }
  // 当前数据下面一项
  const downData = dataList.value[index + 1]

  // 数据上移
  dataList.value.splice(index, 1, downData)

  // 数据下移
  dataList.value.splice(index + 1, 1, data)

  // 发起排序
  changeDraggableItem()
}

// 加载分组列表
const loadGroupList = () => {
  http.get('/sys/fund/optional/groupList').then((res: any) => {
    if (res.success) {
      // 结果集
      const result = res.result
      // 赋值初始数组
      initGroup.value = result
      // 数据
      const data = ['默认']
      // 遍历
      result.forEach((i) => {
        data.push(i.name)
      })
      groupList.value = data
    }
  })
}

// 确定分组
const handleGroupConfirm = () => {
  if (groupName.value !== '') {
    let groupId = ''
    if (groupName.value !== '默认') {
      for (let i = 0; i < groupList.value.length; i++) {
        const data = groupList.value[i]
        if (data === groupName.value && i !== 0) {
          groupId = initGroup.value[i - 1].id
        }
      }
    }
    // 遍历给选择的数据赋值
    const paramList = []
    dataList.value.forEach((e) => {
      if (e.checked) {
        paramList.push({ id: e.id, groupId })
      }
    })
    // 发起请求
    http.post('/sys/fund/optional/moveGroup', paramList).then((res: any) => {
      if (res.success) {
        loadData()
      }
    })
  }
}

onShow(() => {
  loadData()
  loadGroupList()
})
</script>

<style lang="scss" scoped>
.wrap {
  background: linear-gradient(to bottom, #daf0fe, #f9fbfb);
}
</style>
